<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no" />
    <title>承接支付</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFangSC-Regular, sans-serif;
            color: #333333;
        }

        .flex {
            display: flex;
            display: -ms-flex;
            display: -webkit-flex;
            display: -moz-flex;
        }

        input {
            border: none;
            outline: none;
        }

        .showDetail {
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            background-color: #fff;
        }

        .showDetail li {
            width: 100%;
            height: 0.9rem;
            padding: 0 0.24rem;
            box-sizing: border-box;
            color: #181818;
        }

        .showDetail li p {
            width: 100%;
            display: flex;
            display: -webkit-flex;
            height: 100%;
            align-items: center;
            justify-content: space-between;
            font-size: 0.27rem;
        }

        .showDetail .limitText {
            line-height: 0.68rem;
            height: 0.68rem
        }

        .showDetail li:last-child>p {
            border-bottom: 0;
        }

        .showDetail li p span:last-of-type {
            font-weight: 500;
            font-size: 0.26rem;
            color: #181818;
        }

        .limitText {
            justify-content: flex-end;
            color: #ffa6a6;
            background-color: #f7f7f7;
            align-items: center;
        }



        #showButton .rentNumber span {
            display: inline-block;
            height: 0.76rem;
            width: 0.76rem;
            font-size: 0.4rem;
            line-height: 0.76rem;
            text-align: center;
            background-color: #f7f7f7;
            color: #878787;
        }

        #showButton .rentNumber input {
            display: inline-block;
            width: 1.45rem;
            height: 0.72rem;
            line-height: 0.72rem;
            text-align: center;
            background-color: #f7f7f7;
            color: #878787;
            margin: 0 0.1rem;
            font-size: 0.28rem;
        }

        .rightData {
            align-items: center;
            -webkit-align-items: center
        }

        .payMoney {
            font-size: 0.28rem;
            color: #ffd203;
        }

        .showDetail li p>span>.dw {
            font-size: 0.25rem;
            color: #ffd203;
            padding-left: 0.1rem;
        }

        .showDetail .hideBorder {
            height: 0.2rem;
            background: #f7f7f7;
            display: none
        }

        .choseTitle {
            padding: 0 0.24rem;
            background: #f7f7f7
        }

        .choseTitle>span:first-child {
            font-size: 0.22rem;
            color: #b1b1b1;
            line-height: 0.68rem;
        }

        .choseTitle>span:last-child {
            font-size: 0.22rem;
            color: #181818;
            line-height: 0.68rem;
            float: right
        }

        .payWay_Box {
            padding: 0 0.24rem;
            background: #fff;
        }

        .payWay_Box {
            color: #181818;
        }

        .payLogo {
            width: 0.56rem;
            vertical-align: middle;
            margin-left: 0.1rem;
            margin-right: 0.22rem
        }

        .payWayTxt {
            font-size: 0.27rem;
        }

        .this_leastM {
            font-size: 0.24rem;
            padding-left: 0.1rem
        }

        input[type=radio] {
            border: 0;
            width: 0.44rem;
            height: 0.44rem;
            position: absolute;
            z-index: 2;
            right: 0;
            top: 50%;
            margin: 0;
            margin-top: -0.22rem;
            ;
            opacity: 0
        }

        .radioStyle {
            width: 0.2rem;
            height: 0.2rem;
        }

        .payWay_Box label {
            line-height: 1rem;
            position: relative;
            border-bottom: 0.01rem solid#e2e2e2;
            height: 100%;
            display: block;
            box-sizing: border-box
        }

        .payWay_Box label:last-child {
            border-bottom: 0;
        }

        .radioStyle {
            width: 0.44rem;
            height: 0.44rem;
            display: inline-block;
            background: #fff;
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            z-index: 1;
            right: 0;
            margin-top: -0.22rem;
            top: 50%;
            border: 0.01rem solid#656565;
        }

        input[type=radio]:checked+.radioStyle {
            border: 0;
            background: url("../../image/checknew.png") center center no-repeat;
            background-size: 100% 100%;
        }

        #agreementinput {
            opacity: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            margin: 0;
            border: 0;
            left: 0;
            top: 0
        }

        .rementLabel {
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            line-height: 0.9rem;
        }

        .rementLabel .agreement_style {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            margin: 0;
            border: 0.02rem solid#656565;
            border-radius: 0.04rem;
            left: 0;
            top: 0;
        }

        .rementLabel>span:last-child {
            font-size: 0.27rem;
            vertical-align: middle
        }

        .rementLink {
            color: #ffd203;
            line-height: 0.9rem
        }

        .rentBtn {
            display: inline-block;
            width: 6.9rem;
            background: #ffd203;
            color: #181818;
            height: 0.88rem;
            border-radius: 0.1rem;
            line-height: 0.88rem;
            text-decoration: unset;
            font-size: 0.28rem;
            text-align: center;
        }

        .rementLabel .agreement_style_checked {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            margin: 0;
            border: 0.02rem solid#ffd203;
            border-radius: 0.04rem;
            left: 0;
            top: 0;
        }

        .rementLabel .agreement_style_checked:after {
            content: '';
            width: 0.12rem;
            height: 0.12rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -0.06rem;
            margin-top: -0.08rem;
            background: transparent;
            border: 2px solid #ffffff;
            border-top: none;
            border-right: none;
            z-index: 2;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            border-color: #ffd203;
        }

        .notAgree {
            background: #e6e6e6;
        }
    </style>
</head>

<body>
    <div>
        <ul class="showDetail">
            <li style="height: 1rem;">
                <p style="border-bottom: 1px solid #f7f7f7;">
                    <span>合约名称</span>
                    <span class="machineName">--</span>
                </p>
            </li>
            <li id="openDialog" style="height: 0.74rem;margin-top: 0.2rem;">
                <p>
                    <span>
                        承接BTC总算力
                    </span>
                    <span class="getAllPower rightData flex">
                        <span class="powerNum">
                            <span>0T</span>
                        </span>
                        <img src="../../image/rightjt.png" alt=""
                            style="width:0.16rem;height:0.29rem;margin-left: 0.24rem;">
                    </span>
                </p>
            </li>
            <li style="height: 0.74rem;display: none;" class="showBhpLi">
                <p>
                    <span>
                        承接BHP参配算力
                    </span>
                    <span class="getAllPower rightData flex bhpDisPower">
                        0 T
                    </span>
                </p>
            </li>
            <li style="height: 0.74rem">
                <p>
                    <span>
                        转让价格
                    </span>
                    <span class="getAllPower rightData flex overtakingPrice">
                        0.00CNY
                    </span>
                </p>
            </li>
            <li style="height: 0.74rem;margin-bottom: 0.2rem;">
                <p>
                    <span>
                        合约锁定期限
                    </span>
                    <span style="color: #8b8b8b;">
                        <span>
                            30
                        </span>
                        天
                    </span>
                </p>
            </li>
            <li style="height: 1.1rem;border-top: 0.2rem solid #f7f7f7;">
                <p>
                    <span>总计需付金额</span>
                    <span class="getAllPower">
                        <span class="payMoney">0000</span><span class="dw">CNY</span>
                    </span>
                </p>
            </li>
            <!-- <li style="background-color: #f7f7f7;height: 0.74rem;font-size: 0.24rem;">
                <p style="color: #696969;justify-content: flex-end;">
                    <span style="color: #696969;">
                        1 USDT = <span>1</span> CNY
                    </span>
                </p>
            </li> -->
        </ul>
        <div class="payWay_Box">
            <label for="usdt" id="usdtPay" style="display: none;">
                <img src="../../image/usdt.png" alt="" class="payLogo">
                <span class="payWayTxt">USDT支付</span>
                <span class="this_leastM">(<span class="userUsdt">0.00</span>)</span>
                <input type="radio" name="payWay" id="usdt" value="USDT" data-paymethod="RRM_USDT">
                <span class="radioStyle"></span>
            </label>
            <label for="bcny" id="bcnyPay" style="display: none;">
                <img src="../../image/bcny_icnoux.png" alt="" class="payLogo">
                <span class="payWayTxt">余额OTC支付</span>
                <span class="this_leastM">(<span class="userBcny">0.00</span>)</span>
                <input type="radio" name="payWay" value="BCNY" id="bcny" data-paymethod="RRM_BCNY">
                <span class="radioStyle"></span>
            </label>
            <label for="wallet" id="walletPay" style="display: none;">
                <img src="../../image/cnyiconimg.png" alt="" class="payLogo">
                <span class="payWayTxt">CNY</span>
                <span class="this_leastM">(可用: <span class="userCny">0.00</span>)</span>
                <input type="radio" name="payWay" value="CNY" id="wallet" data-paymethod="RRM_CASH">
                <span class="radioStyle"></span>
            </label>
        </div>
        <div id="hideBox" style="padding-bottom: 0.45rem;display: none;">
            <p style="text-align: left;margin-bottom: 0.5rem;padding:0 0.3rem;box-sizing: border-box;text-indent: -.2rem;margin-left: 0.4rem;"
                class="showContract">
                <label class="rementLabel">
                    <span
                        style="position: relative;width: 0.3rem;height: 0.3rem;display: inline-block;vertical-align: middle;margin-right: 0.05rem">
                        <input type="checkbox" id="agreementinput" checked name="agreement">
                        <span class="ag_checkedstyle agreement_style"></span>
                    </span>
                    <span style="vertical-align: middle;font-size: 0.27rem;">我同意</span>
                </label>
            </p>
            <p style="text-align: center;">
                <a href="javascript:;" class="rentBtn notAgree" style="text-decoration:none;">立即支付</a>
            </p>
        </div>
        <p id="checkButton" style="width: auto;height: auto;margin-left:calc((100% - 6.9rem) / 2);margin-top: 0.5rem;">

        </p>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var validateTokenNew = "";
            var account = app.getAccount();
            var machineId = api.pageParam.machineId; //订单ID
            var machineDetail = api.pageParam.machineDetail; //机器信息
            var is_captcha = api.pageParam.is_captcha; //是否支持验证
            var argrmeet = api.pageParam.argmennt;//协议文本
            var agreementinput = false; //是否同意协议
            var myUseMoney = api.pageParam.myUseMoney; //我的余额
            var re = /([0-9]+\.[0-9]{2})[0-9]*/;
            var contractText = [];//保存协议
            app.ajaxPro({
                url: "transfer/contract",
                values: {
                    token: account.token,
                    order_id: machineId
                },
                openFlower: true
            }, function (ret) {
                contractText = ret.data;
                for (var i = 0; i < contractText.length; i++) {
                    var thisText = contractText[i].id;
                    var temple = '<span class="rementLink" style="font-size: 0.24rem;" data-value=' + thisText + '>《' + contractText[i].name + '》</span>'
                    $(".showContract").append(temple);
                }
            })
            if (machineDetail.isBhpPos == 1) {
                $(".showBhpLi").show();
            }
            // var total_power = app.accMul(machineDetail.basePower, machineDetail.num);//基础总算力
            machineDetail.floatPower = app.accMul(machineDetail.floatPower, machineDetail.num);//浮动算力
            // app.moreAccAdd(total_power, machineDetail.floatPower, machineDetail.pePower)
            var totalPowerAll = machineDetail.computingPower;//总算力
            if (is_captcha == 1) {
                _fmOpt = {
                    display: 'popup', //popup方式渲染验证码
                    container: '#checkButton', //验证码button渲染的目标DOM，自动展现方式下必需，详情见后文
                    area: '.customForm', //对于custom模式，弹出窗口的加载容器，详情见后文
                    partner: "renrenkj",
                    appName: "renrenkj_h5",
                    width: "6.9rem",
                    height: "0.88rem",
                    fmb: true,
                    initialTime: new Date().getTime(),
                    token: "renrenkj" + "-" + new Date().getTime() + "-" + Math.random().toString(16).substr(2),
                    env: 1,
                    getinfo: function () {
                        return "e3Y6ICIyLjUuMCIsIG9zOiAid2ViIiwgczogMTk5LCBlOiAianMgbm90IGRvd25sb2FkIn0=";
                    },
                };
                var fm = document.createElement('script');
                fm.type = 'text/javascript';
                fm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.tongdun.net/captcha/main/tdc.js?ver=1.0&t=' + (new Date().getTime() / 600000).toFixed(0);
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(fm, s);
                _fmOpt.onSuccess = function (validateToken) {
                    if (validateToken) {
                        validateTokenNew = validateToken;
                        $("#hideBox").show();
                        $("#checkButton").hide();
                    } else {
                        _fmOpt.reset();
                    }
                };
            } else {
                $("#checkButton").hide();
                $("#hideBox").show();
            }
            $(".userUsdt").text(myUseMoney.myUsdt);
            $(".userBcny").text(myUseMoney.myBcny);
            $(".userCny").text(myUseMoney.myRmb);
            $(".machineName").text(machineDetail.productName);
            $(".bhpDisPower").text(app.accMul(machineDetail.num, machineDetail.bhpPower) + "T");
            $(".powerNum").text(totalPowerAll + " T");
            if (machineDetail.paymentCurrencyCode != "USDT") {
                $(".overtakingPrice").text(app.sliceNum(machineDetail.totalDeposit, 2) + " " + (machineDetail.paymentCurrencyCode == "BCNY" ? "CNY" : machineDetail.paymentCurrencyCode));
                $(".payMoney").text(app.sliceNum(machineDetail.totalDeposit, 2));
            } else {
                $(".payMoney").text(app.sliceNum(machineDetail.totalDeposit, 4));
                $(".overtakingPrice").text(app.sliceNum(machineDetail.totalDeposit, 4) + " " + machineDetail.paymentCurrencyCode);
            }
            $(".dw").text(machineDetail.paymentCurrencyCode == "BCNY" ? "CNY" : machineDetail.paymentCurrencyCode);
            if (machineDetail.paymentCurrencyCode == "CNY") {
                $("#walletPay").show();
                $("#wallet").attr("checked", true);
            } else if (machineDetail.paymentCurrencyCode == "BCNY") {
                $("#bcnyPay").show();
                $("#bcny").attr("checked", true);
            } else {
                $("#usdtPay").show();
                $("#usdt").attr("checked", true);
            }

            $(".showContract").on("click", ".rementLink", function () {
                var thisValue = $(this).attr("data-value");
                for (let i = 0; i < contractText.length; i++) {
                    if (contractText[i].id == thisValue) {
                        var param = {
                            dtype: "dialog391",
                            data: {
                                title: contractText[i].name,
                                orderText: contractText[i].content,
                                btns: [{
                                    name: "我已阅读并同意",
                                    event: "okRentMachine"
                                }],
                                extra: {}
                            }
                        };
                        app.dialog(param);
                    }
                }
            })
            //点击租用
            $(".rentBtn").bind('tap click', function () {
                var checkedMethod = $("input[name='payWay']:checked").val();
                if (agreementinput == true) {
                    if (Number(machineDetail.totalDeposit) > Number(myUseMoney.myUsdt) && checkedMethod == "USDT") {
                        var param = {
                            dtype: "dialog1",
                            data: {
                                title: "提示",
                                text: "USDT余额不足，请确认是否前去充值？",
                                btns: [{
                                    name: "取消",
                                    event: ""
                                },
                                {
                                    name: "确定",
                                    event: "chargeUsdt"
                                }
                                ]
                            }
                        };
                        app.dialog(param);
                        return
                    }
                    if (Number(machineDetail.totalDeposit) > Number(myUseMoney.myBcny) && checkedMethod == "BCNY") {
                        var param = {
                            dtype: "dialog1",
                            data: {
                                title: "提示",
                                text: "CNY余额不足，请确认是否前去充值？",
                                btns: [{
                                    name: "取消",
                                    event: ""
                                },
                                {
                                    name: "确定",
                                    event: "chargeRMB"
                                }
                                ]
                            }
                        };
                        app.dialog(param);
                        return
                    }
                    if (Number(machineDetail.totalDeposit) > Number(myUseMoney.myRmb) && checkedMethod == "CNY") {
                        var param = {
                            dtype: "dialog1",
                            data: {
                                title: "提示",
                                text: "CNY余额不足，请确认是否前去充值？",
                                btns: [{
                                    name: "取消",
                                    event: ""
                                },
                                {
                                    name: "确定",
                                    event: "chargeRMB"
                                }
                                ]
                            }
                        };
                        app.dialog(param);
                        return
                    }
                    app.ajaxPro({
                        url: "transfer/take",
                        values: {
                            token: account.token,
                            orderId: machineId,
                            blackBox: is_captcha == 1 ? _fmOpt.getinfo() : "",
                            yzm_token: validateTokenNew
                        },
                        openFlower: true
                    }, function (ret) {
                        if (ret.code == 200) {
                            app.toast("承接成功");
                            app.trigger("goTranfer", {
                                goTranfer: true
                            });
                            app.closeW();
                        } else {
                            app.toast(ret.message);
                            app.reload();
                        }
                    });
                }
            });
            $(".rementLabel").click(function () {
                if (agreementinput == false) {
                    agreementinput = true;
                    $(".ag_checkedstyle").removeClass('agreement_style').addClass('agreement_style_checked');
                    $(".rentBtn").removeClass('notAgree')
                } else {
                    agreementinput = false;
                    $(".ag_checkedstyle").removeClass('agreement_style_checked').addClass('agreement_style');
                    $(".rentBtn").addClass('notAgree')
                }
            });
            app.listen("okRentMachine", function () {
                if (agreementinput == false) {
                    $(".rementLabel").click();
                }
            });
            $("#openDialog").click(function () {
                var param = {
                    dtype: "dialog220",
                    data: {
                        newAllPower: totalPowerAll + " T",
                        powerList: [{
                            name: "基础算力",
                            Power: app.accMul(machineDetail.basePower, machineDetail.num) + " T"
                        },
                        {
                            name: "浮动算力",
                            Power: machineDetail.floatPower + " T"
                        },
                        {
                            name: "达标算力",
                            Power: machineDetail.pePower + " T"
                        },
                        {
                            name: "期货算力",
                            Power: "0.00" + " T"
                        },
                        {
                            name: "定期算力",
                            Power: machineDetail.regularPower + " T"
                        }
                        ]
                    }
                };
                app.dialog(param);
            })
            app.listen("chargeBcny", function () {
                app.closeF("dialog");
                // 跳转到现金余额充值页面
                app.openWin({
                    name: "buyandsellbcny_headerwin",
                    url: app.hd + "common/headerwin.html",
                    pageParam: {
                        subpage: "my/buyandsellbcny",
                        name: "buyandsellbcny",
                        title: "BCNY兑换",
                        right: "记录",
                        rightParam: {
                            page: "common/headerwin",
                            name: "sellandbuybcnylist_headerwin",
                            param: {
                                subpage: "my/sellandbuybcnylist",
                                name: "sellandbuybcnylist",
                                showBcny: "true"
                            }
                        }
                    }
                })
            });
            var listen = ["chargeRMB", "chargeUsdt"];
            app.listen("chargeRMB", function () {
                app.closeF("dialog");
                app.rechangChecked()
            });
            app.listen("YESIKNOW", function () {
                var cointypecontract = {
                    page: "common/headerwin",
                    name: "littlemoneyrecharge_headerwin",
                    param: {
                        subpage: "extrapage/littlemoneyrecharge",
                        name: "littlemoneyrecharge",
                        title: "充值",
                        allowEdit: true
                    }
                };
                var recoinNumber = JSON.stringify(cointypecontract);
                app.goPushPage(recoinNumber);
            });
            app.listen("checkRealName", function () {
                var goCerfition = {
                    page: "common/headerwin",
                    name: "choosecerfertion_headerwin",
                    param: {
                        subpage: "my/choosecerfertiontwo",
                        name: "choosecerfertiontwo",
                        title: "实名校验",
                        goAddMoney: true
                    }
                };
                var recoinNumber = JSON.stringify(goCerfition);
                app.goPushPage(recoinNumber);
            });
            var events = [
                "bhpcCountChange",
                "littlemoney_recharge_success",
                "buycoin_success",
                "buyBcnySucceed"
            ];
            app.listen(events, function () {
                app.specialCoin(account, function (ret, err) {
                    if (ret.code == 200) {
                        myUseMoney.myBcny = app.sliceNum(ret.data.lists.BCNY, 2);
                        myUseMoney.myUsdt = app.sliceNum(ret.data.lists.USDT, 4);
                        myUseMoney.myRmb = app.sliceNum(ret.data.lists.CNY, 2);
                        $(".userUsdt").text(myUseMoney.myUsdt);
                        $(".userBcny").text(myUseMoney.myBcny);
                        $(".userCny").text(myUseMoney.myRmb);
                    }
                });
            });
            app.headerMap();
        };
    </script>
</body>

</html>